<script lang="ts" setup>
  import { computed, ref } from 'vue'
  import mobile from './components/mobile.vue'
  import password from './components/password.vue'
  // 登录方式数组
  const loginType = [
    { title: '验证码登录', subTitle: '密码登录' },
    { title: '密码登录', subTitle: '验证码登录' },
  ]
  // 当前登录方式索引
  const currentIndex = ref(0)
  // 计算属性拿到当前登录的方式
  const nowLogin = computed(() => {
    return loginType[currentIndex.value]
  })
  // 切换索引
  const changeIndex = () => {
    currentIndex.value = Math.abs(currentIndex.value - 1)
  }
</script>

<template>
  <view class="user-login">
    <view class="logo">
      <image src="/src/static/logo.png" style="width: 80px; height: 80px" />
    </view>
    <view class="login-type">
      <!-- 上面登录方式文字 -->
      <view class="login-txt">
        <!-- 当前登录方式 -->
        <view class="title">{{ nowLogin.title }}</view>
        <!-- 切换登录 -->
        <view class="type" @click="changeIndex">
          <text>{{ nowLogin.subTitle }}</text>
          <uni-icons color="#fe6a3d" type="forward" />
        </view>
      </view>
      <!-- 自定义组件 -->
      <mobile v-if="currentIndex === 0" />
      <password v-else />
    </view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
